﻿<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	  
	<script type="text/javascript" src="scripts/local-storage-extensions.js"></script>	
	<script type="text/javascript" src="scripts/storage.js"></script>
	<script type="text/javascript" src="scripts/expenses.js"></script>
	<script type="text/javascript" src="scripts/accounts.js"></script>
	<script type="text/javascript" src="scripts/categories.js"></script>
	
	<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
	  
	  <!-- jQuery and jQuery Mobile -->
	  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
	  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <style>
	    div > ul > li a > span{
	        display: inline-block;
	        float: right;
	        color: #61B329;
	        font-size: 14px;
	        text-shadow: 1px 1px 0px green;
	    }

	    div ul li a strong{
	    	position: absolute;
	    	left: 40%;
	    }

	   span.totalAccountsSum{

	        display: inline-block;
	        float: right;
	        color: white;
	    }
   </style>
</head>
	 
<body>
	<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">

        <a id="delete-button" data-role="button" href="#page1" data-icon="delete" data-iconpos="right"
        class="ui-btn-right">
            Delete card
        </a>

        <a id="backButton" data-role="button" href="" data-icon="back" data-iconpos="left"
        class="ui-btn-left">
            Back
        </a>
        <h3 id="accName">
            Accounts <span id="totalBalance"></span>
        </h3>
    </div>
    <div data-role="content">
        <div id="acc-container" data-role="collapsible-set" data-theme="b" data-content-theme="a">
                <ul id="list" data-role="listview" data-divider-theme="b" data-inset="true">
                    
                </ul>
        </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>
	<script type="text/javascript" src="scripts/expensesByAccount-ui.js"></script>
</body>
</html>